<template>
  <a-layout :class="['admin-layout', 'beauty-scroll']">
    <drawer v-if="isMobile" v-model="drawerOpen">
      <side-menu :theme="theme.mode" :menuData="menuData" :collapsed="false" :collapsible="false"
        @menuSelect="onMenuSelect" />
    </drawer>
    <side-menu :class="[fixedSideBar ? 'fixed-side' : '',collapsed?'backgrounds':'']" :theme="theme.mode"
      v-else-if="layout === 'side' || layout === 'mix'" :menuData="sideMenuData" @toggleCollapse="toggleCollapse"
      :collapsed="collapsed" :collapsible="true" @childrenLehgth="childrenLehgths" />

    <div v-if="fixedSideBar && !isMobile"
      :style="`width: ${sideMenuWidth}; min-width: ${sideMenuWidth};max-width: ${sideMenuWidth};`" class="virtual-side">
    </div>
    <drawer v-if="!hideSetting" v-model="showSetting" placement="right">
      <div class="setting" slot="handler">
        <a-icon :type="showSetting ? 'close' : 'setting'" />
      </div>
      <setting />
    </drawer>
    <a-layout class="admin-layout-main beauty-scroll">
      <admin-header style="z-index:10"
        :class="[{ 'fixed-tabs': fixedTabs, 'fixed-header': fixedHeader, 'multi-page': multiPage }]"
        :style="headerStyle" :menuData="headMenuData" :collapsed="collapsed" @toggleCollapse="toggleCollapse"
        @logout="logout" />
      <a-layout-header style="z-index:9"
        :class="['virtual-header', { 'fixed-tabs': fixedTabs, 'fixed-header': fixedHeader, 'multi-page': multiPage }]"
        v-show="fixedHeader"></a-layout-header>
      <a-layout-content class="admin-layout-content"
        :style="`min-height: 100%-84px;background:white; margin-left: ${isMobile ? 0 : collapsed ?20 :childrenLehgth?20:20}px; transition: margin-left 100ms ease-out 0ms`">
        <div style="position: relative; padding-bottom: 20px; ">
          <slot></slot>
        </div>
      </a-layout-content>
      <!-- <a-button type="primary" @click="openNotification">
              报警
            </a-button> -->
      <!-- <a-layout-footer style="padding: 50px">
        <page-footer :link-list="footerLinks" :copyright="copyright" />
      </a-layout-footer>-->
    </a-layout>
  </a-layout>
</template>

<script>
import AdminHeader from './header/AdminHeader'
// import PageFooter from './footer/PageFooter'
import Drawer from '../components/tool/Drawer'
import SideMenu from '../components/menu/SideMenu'
import Setting from '../components/setting/Setting'
import { mapState, mapMutations, mapGetters } from 'vuex'
import { realTime } from '@/services/message'
// const minHeight = window.innerHeight - 64 - 122
const key = 'updatable'
export default {
  name: 'AdminLayout',
  components: {
    Setting,
    SideMenu,
    Drawer,
    // PageFooter,
    AdminHeader
  },
  data () {
    return {
      childrenLehgth: false,
      Polling: undefined,
      minHeight: window.innerHeight - 64 - 122,
      collapsed: false,
      showSetting: false,
      drawerOpen: false
    }
  },
  provide () {
    return {
      adminLayout: this
    }
  },
  watch: {
    $route (val) {
      this.setActivated(val)
    },
    layout () {
      this.setActivated(this.$route)
    },
    isMobile (val) {
      if (!val) {
        this.drawerOpen = false
      }
    }
  },
  computed: {
    ...mapState('setting', [
      'isMobile',
      'theme',
      'layout',
      'footerLinks',
      'copyright',
      'fixedHeader',
      'fixedSideBar',
      'fixedTabs',
      'hideSetting',
      'multiPage'
    ]),
    ...mapGetters('setting', ['firstMenu', 'subMenu', 'menuData']),

    sideMenuWidth () {
      return this.collapsed ? '80px' : this.childrenLehgth ? '264px' : '110px'
    },
    headerStyle () {
      const width =
        this.fixedHeader && this.layout !== 'head' && !this.isMobile
          ? `calc(100% - ${this.sideMenuWidth})`
          : '100%'
      const position = this.fixedHeader ? 'fixed' : 'static'
      return `width: ${width}; position: ${position}; boxShadow: 0 4px 8px #f5f5f5;`
    },
    headMenuData () {
      const { layout, menuData, firstMenu } = this
      return layout === 'mix' ? firstMenu : menuData
    },
    sideMenuData () {
      const { layout, menuData, subMenu } = this
      return layout === 'mix' ? subMenu : menuData
    }
  },
  methods: {
    childrenLehgths (data) {
      this.childrenLehgth = data
    },
    ...mapMutations('setting', ['correctPageMinHeight', 'setActivatedFirst', 'setCollapsed']),
    toggleCollapse () {
      this.collapsed = !this.collapsed

      this.setCollapsed(this.collapsed ? 80 : 264)
    },
    descriptionClick () {
      if (this.$route.path === '/vehicleManage/vehicleManage/alarm') {
        this.$notification.close(key)
      } else {
        this.$notification.close(key)

        this.$router.push({ path: '/vehicleManage/vehicleManage/alarm' })
      }
    },
    async openNotification () {
      // realTime

      const res = await realTime()

      const { isSuccess, data: response } = res
      if (isSuccess) {
        if (Object.prototype.toString.call(response) !== '[object Null]') {
          this.$notification.open({
            key,
            message: '车辆报警通知',
            duration: 15,
            description: <div>
              <span>`您有${response.note}条车辆报警通知，请立即`</span>
              <a-button type="link" >
                立即查看
              </a-button>
            </div>,
            onClick: () => {
              this.descriptionClick()
            },
            icon: <img style="width:24px;" src={require('../assets/img/danger.png')} />
          })
        }
      }
    },
    onMenuSelect () {
      this.toggleCollapse()
    },
    setActivated (route) {
      if (this.layout === 'mix') {
        let matched = route.matched
        matched = matched.slice(0, matched.length - 1)
        const { firstMenu } = this
        for (const menu of firstMenu) {
          if (matched.findIndex((item) => item.path === menu.fullPath) !== -1) {
            this.setActivatedFirst(menu.fullPath)
            break
          }
        }
      }
    },
    ReckonTime () {
      this.Polling = setInterval(() => {
        // this.openNotification()
      }, 300000)
    },
    logout () {
      clearInterval(this.Polling)
    }
  },
  destroyed () {
    clearInterval(this.Polling)
  },
  created () {
    // this.openNotification()
    this.ReckonTime()
    this.correctPageMinHeight(this.minHeight - 24)
    this.setActivated(this.$route)
  },
  beforeDestroy () {
    this.correctPageMinHeight(-this.minHeight + 24)
  }
}
</script>

<style lang="less" scoped>
.admin-layout {
  .side-menu {
    &.fixed-side {
      // background-color:red ;
      position: fixed;
      height: 100vh;
      left: 0;
      top: 0;
    }
  }

  .virtual-side {
    transition: all 0.2s;
  }

  .virtual-header {
    transition: all 0.2s;
    opacity: 0;

    &.fixed-tabs.multi-page:not(.fixed-header) {
      height: 0;
    }
  }

  .admin-layout-main {

    .admin-header {
      top: 0;
      right: 0;
      overflow: hidden;
      transition: all 0.2s;

      &.fixed-tabs.multi-page:not(.fixed-header) {
        height: 0;
      }
    }
  }

  .admin-layout-content {
    margin: 20px;
    overflow-x: hidden;
    min-height: calc(100vh - 64px - 122px);
  }

  // .backgrounds {
  //   background-color: #001F4D;;
  // }

  .setting {
    background-color: @primary-color;
    color: @base-bg-color;
    border-radius: 5px 0 0 5px;
    line-height: 40px;
    font-size: 22px;
    width: 40px;
    height: 40px;
    box-shadow: -2px 0 8px @shadow-color;
  }
}
</style>
